<!-- 中间导航 -->
<template>
  <div class="zjdh">
    <zjdh v-for="(item,index) in arr" :key="index" >
      <img :src="item.tp" slot="tp" >
      <p slot="tp">{{item.wz}}</p>
    </zjdh>
  </div>
</template>

<script>
 import zjdh from "bcggzj/buttombar/stxzzj.vue"
export default {
  components: {
    zjdh,
  },
  data() {
    return {
      arr:[
        {tp:'tj.png',wz:"推荐",color:"#feadac"},
        {tp:'sc.png',wz:"收藏",color:"#c3b2d6"},
        {tp:'pf.png',wz:"评分",color:"#f8ce7a"},
        {tp:'wj.png',wz:"完结",color:"#8dd9ff"},
        {tp:'rg.png',wz:"热更",color:"#97e9bb"}
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.zjdh {
  display: flex;
  width: 100%;
  justify-content: space-around;
  font-size: 0.3rem;
  color: #595959;
  background-color: #fff;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.zjdh img {
  width: 0.52rem;
  background-color: #c1392b;
  border-radius:50%;
}
</style>